<template>
    <div class="wrapper">
        <div class="cont" v-for="g in order.goods" @click="goToDetail(g)">
            <div class="cont-left">
                <image class="goods-img" resize="cover" :src="g.img || defaultImg"></image>
                <text class="text-detail font-msyhl">{{g.title}}</text>
            </div>

            <div class="cont-right">
                <text class="text-price font-msyhl">{{g.price | currency('¥')}}</text>
                <text class="text-num font-msyhl">&times;{{g.num}}</text>


                <div class="cont-right-btn" v-if="order.can_refund || order.has_refund">
                    <order-btn-min v-if="g.rid" :borderColor="g.r_status == '退款中' ? '#f6a623' : '#313131'" :color="g.r_status == '退款中' ? '#f6a623' : '#313131'" @btnClick="goToRefundDetail(g.rid)">{{g.r_status}}</order-btn-min>
                    <order-btn-min v-else :borderColor="'#313131'" :color="'#313131'" @btnClick="goToRefund(g)">退款</order-btn-min>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .cont {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 30px;
        padding-right: 30px;
        background-color: #f8f8f8;
    }
    .cont-left {
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .goods-img {
        width: 150px;
        height: 150px;
    }
    .text-detail {
        width: 686px;
        padding-left: 16px;
        padding-right: 16px;
        lines: 2;
        text-overflow: ellipsis;
        font-size: 26px;
        color: #313131;
    }
    .cont-right {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .text-price {
        font-size: 26px;
        color: #313131;
    }
    .text-num {
        font-size: 26px;
        color: #8d8d8d;
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .cont-right-btn {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>
<script>
    import orderBtnMin from 'components/btn-item/order-btn-min.vue';
    import defaultImg from 'assets/images/default-img.png';
    import api from "api/api";
    import navigator from "utils/navigator";
    import route from 'constants/route';
    import constant from 'constants/constant';
    import modal from "utils/modal";

    export default{
        props: {
            order: {
                type: Object,
                required: true
            }
        },
        data(){
            return {
                defaultImg: defaultImg
            }
        },
        methods: {
            goToDetail(goods){
                let options = {
                    url: route.detail_index,
                    title: "商品详情",
                    params: {
                        id: goods.id
                    }
                };
                navigator.push(options);
            },
            goToRefundDetail(rid){
                let options = {
                    classType: constant.Drawer_Class_Type,
                    url: route.order_funddetail,
                    title: "退款详情",
                    params: {
                        rid: rid
                    }
                };
                navigator.push(options);
            },
            goToRefund(goods){
                let self = this;
                if(goods){
                    let options = {
                        classType: constant.Drawer_Class_Type,
                        url: route.order_applyfund,
                        title: "申请退款",
                        params: {
                            goods: goods
                        }
                    };
                    navigator.push(options);
                }
            }
        },
        components: {
            "order-btn-min": orderBtnMin
        }
    }
</script>
